<template>
  <div class="container">
    <!-- #region 添加 -->

    <el-form
      ref="addFromRef"
      :model="addForm"
      :rules="$rules"
      label-width="200px"
      status-icon
      :disabled="isCheck"
      class="grid-flex"
    >
      <template v-for="(value, key) in addFormItems">
        <template v-if="key === 'BankName'">
          <el-form-item :key="key" :label="$language.local(key)" :prop="key">
            <select-bank v-model="addForm[key]"></select-bank>
          </el-form-item>
        </template>
        <template v-else-if="/bankcard/i.test(key)">
          <el-form-item :key="key" :label="$language.local(key)" :prop="key">
            <xy-number v-model="addForm[key]"></xy-number>
          </el-form-item>
        </template>
        <template v-else-if="key == 'SuperiorAgentName'">
          <el-form-item :key="key" :label="$language.local(key)" :prop="key">
            <select-name
              v-model="addForm[key]"
              label-key="AgentName"
              apiName="/api/Agent/GetList"
              @change="superiorAgentChange"
            ></select-name>
          </el-form-item>
        </template>
        <template v-else-if="key == 'AgentName'">
          <el-form-item :key="key" :label="$language.local(key)" :prop="key">
            <xy-input
              v-if="api.entity === 'Agent'"
              v-model="addForm[key]"
            ></xy-input>
            <select-name
              v-else
              v-model="addForm[key]"
              label-key="AgentName"
              apiName="/api/Agent/GetList"
              @change="agentChange"
            ></select-name>
          </el-form-item>
        </template>
        <template v-else-if="key == 'AID'">
          <el-form-item :key="key" :label="$language.local(key)" :prop="key">
            <select-id
              v-model="addForm[key]"
              label-key="AgentName"
              apiName="/api/Agent/GetList"
            ></select-id>
          </el-form-item>
        </template>
        <template v-else-if="key == 'SID'">
          <el-form-item :key="key" :label="$language.local(key)" :prop="key">
            <select-id
              v-model="addForm[key]"
              label-key="ServiceName"
              apiName="/api/Common/GetServiceProviderList"
              @change="sidChange"
            ></select-id>
          </el-form-item>
        </template>
        <template v-else-if="key == 'customerManager'">
          <el-form-item
            v-show="addForm.SuperiorAgentID > 0"
            :key="key"
            :label="$language.local(key)"
            :prop="key"
          >
            <select-manager
              v-model="addForm[key]"
              label-key="real_name"
              :customerId="addForm.SuperiorAgentID"
              @change="selectManager"
            ></select-manager>
          </el-form-item>
        </template>
        <template v-else-if="/(?<!Web)Url|Img/.test(key)">
          <el-form-item :key="key + '' + Date.now()"></el-form-item>
          <el-form-item
            class="upload-img"
            :key="key"
            :label="$language.local(key)"
            :prop="key"
          >
            <upload-image v-model="addForm[key]"></upload-image>
          </el-form-item>
        </template>
        <template v-else-if="key == 'refundType'">
          <el-form-item :key="key" :label="$language.local(key)" :prop="key">
            <refund-type
              v-model="addForm[key]"
              @input="refundTypeChange"
            ></refund-type>
          </el-form-item>
        </template>
        <template v-else-if="key == 'AgentLevel'">
          <el-form-item :key="key" :label="$language.local(key)" :prop="key">
            <select-agent-level v-model="addForm[key]"></select-agent-level>
          </el-form-item>
        </template>
        <template v-else-if="key === 'Sex'">
          <el-form-item :key="key" :label="$language.local(key)" :prop="key">
            <el-radio-group v-model="addForm[key]" class="sex">
              <el-radio label="1" border
                ><i class="el-icon-male"></i> 男</el-radio
              >
              <el-radio label="2" border>
                <i class="el-icon-female"></i>
                女</el-radio
              >
            </el-radio-group>
          </el-form-item>
        </template>
        <template v-else-if="key === 'ServiceID'">
          <el-form-item :key="key" :label="$language.local(key)" :prop="key">
            <select-service v-model="addForm[key]"></select-service>
          </el-form-item>
        </template>
        <template v-else-if="key === 'MID'">
          <el-form-item :key="key" :label="$language.local(key)" :prop="key">
            <select-merchantid
              v-model="addForm[key]"
              :sid="addForm.SID"
              @input="midInput"
            ></select-merchantid>
          </el-form-item>
        </template>
        <template v-else-if="key === 'SettlementBank'">
          <el-form-item :key="key" :label="$language.local(key)" :prop="key">
            <select-bank v-model="addForm[key]"></select-bank>
          </el-form-item>
        </template>
        <template v-else-if="key === 'ServiceContentId'">
          <el-form-item :key="key" :label="$language.local(key)" :prop="key">
            <select-id
              v-model="addForm[key]"
              label-key="name"
              :apiName="'/api/Common/GetdictionaryItem?typenum=002'"
            ></select-id>
          </el-form-item>
        </template>
        <template v-else-if="key.includes('Status')">
          <template v-if="key === 'InvoiceBusinessStatus'">
            <el-form-item :key="key" :label="$language.local(key)" :prop="key">
              <el-select v-model="addForm[key]">
                <el-option :value="1"></el-option>
              </el-select>
            </el-form-item>
          </template>
          <template v-else-if="api.action != 'Create'">
            <el-form-item :key="key" :label="$language.local(key)" :prop="key">
              <el-radio-group v-model="addForm[key]">
                <el-radio :label="1">启用</el-radio>
                <el-radio :label="2">禁用</el-radio>
              </el-radio-group>
            </el-form-item>
          </template>
        </template>
        <!-- #region Rate -->
        <template v-else-if="key === 'Rate'">
          <el-form-item :key="key" :label="$language.local(key)" :prop="key">
            <xy-rate v-model="addForm[key]"></xy-rate>
          </el-form-item>
        </template>
        <!-- #endregion -->
        <!-- #region QZDRate -->
        <template v-else-if="key === 'QZDRate'">
          <el-form-item :key="key" :label="$language.local(key)" :prop="key">
            <xy-rate v-model="addForm[key]"></xy-rate>
          </el-form-item>
        </template>
        <!-- #endregion -->
        <!-- #region 启用状态 -->
        <template v-else-if="key == 'isVisible'">
          <template v-if="api.action != 'Create'">
            <el-form-item :key="key" :label="$language.local(key)" :prop="key">
              <el-radio-group v-model="addForm[key]">
                <el-radio :label="0">启用</el-radio>
                <el-radio :label="1">禁用</el-radio>
              </el-radio-group>
            </el-form-item>
          </template>
        </template>
        <!-- #endregion -->

        <!-- #region 可退款金额 -->
        <template v-else-if="key === 'CanrefundAmount'">
          <el-form-item :key="key" :label="$language.local(key)">
            <xy-decimal disabled v-model="addForm[key]"></xy-decimal>
          </el-form-item>
        </template>
        <!-- #endregion -->
        <!-- #region 代发批次号 -->
        <template v-else-if="key === 'ordrId'">
          <el-form-item :key="key" :label="$language.local(key)">
            <xy-input disabled v-model="addForm[key]"></xy-input>
          </el-form-item>
        </template>
        <!-- #endregion -->
        <!-- #region 收款户名 -->
        <template v-else-if="key === 'BeneficiaryName'">
          <el-form-item :key="key" :label="$language.local(key)">
            <xy-input disabled v-model="addForm[key]"></xy-input>
          </el-form-item>
        </template>
        <!-- #endregion -->

        <!-- #region 退款金额 -->
        <template v-else-if="key === 'refundAmount'">
          <el-form-item :key="key" :label="$language.local(key)" :prop="key">
            <xy-decimal
              :disabled="api.entity === 'Payrefund'"
              v-model="addForm[key]"
              @input="refundAmountInput"
            ></xy-decimal>
          </el-form-item>
        </template>
        <!-- #endregion -->
        <!-- #region 应退款金额 -->
        <template v-else-if="key === 'refundRechargeAmount'">
          <el-form-item :key="key" :label="$language.local(key)" :prop="key">
            <xy-decimal disabled v-model="addForm[key]"></xy-decimal>
          </el-form-item>
        </template>
        <!-- #endregion -->
        <!-- #region 服务商 -->
        <template v-else-if="key === 'ServiceProviderName'">
          <el-form-item
            :key="key"
            :label="$language.local('ServiceProviderName')"
            prop="ServiceProviderName"
          >
            <select-name
              v-model="addForm.ServiceProviderName"
              label-key="ServiceName"
              apiName="/api/Common/GetServiceProviderList"
              @change="serviceChange"
            ></select-name>
          </el-form-item>
        </template>
        <!-- #endregion -->
        <!-- #region 收款银行 -->
        <template v-else-if="key === 'ServiceBank'">
          <el-form-item
            :key="key"
            :label="$language.local('ServiceBank')"
            prop="ServiceBank"
          >
            <select-name
              v-model="addForm.ServiceBank"
              label-key="BankName"
              :model="serviceBanks"
              @change="serviceBankChange"
            ></select-name>
          </el-form-item>
        </template>
        <!-- #endregion -->
        <!-- #region 收款账号 -->
        <template v-else-if="key === 'ServiceAccountNo'">
          <el-form-item
            :key="key"
            :label="$language.local('ServiceAccountNo')"
            prop="ServiceAccountNo"
          >
            <xy-input
              v-model="addForm['ServiceAccountNo']"
              disabled
              class="service-account-no"
            ></xy-input>
          </el-form-item>
        </template>
        <!-- #endregion -->
        <!-- #region 代付通道 -->
        <template v-else-if="key === 'PayChannelId'">
          <el-form-item
            :key="key"
            :label="$language.local('PayChannelId')"
            prop="PayChannelId"
          >
            <select-id
              v-model="addForm.PayChannelId"
              label-key="BankName"
              :model="payChannelList"
            ></select-id>
          </el-form-item>
        </template>
        <!-- #endregion -->
        <!-- #region 客户名称 -->
        <template v-else-if="key === 'CustomerName'">
          <el-form-item
            :key="key"
            prop="CustomerName"
            :label="$language.local('CustomerName')"
          >
            <select-name
              v-model="addForm['CustomerName']"
              label-key="customerName"
              :apiName="`/api/Common/GetMerchantList?sid=${addForm.ServiceProviderID}`"
              @change="customerNameChange"
            ></select-name>
          </el-form-item>
        </template>
        <!-- #endregion -->
        <!-- #region 充值费率 -->
        <template v-else-if="key === 'RechargeRate'">
          <el-form-item
            :key="key"
            :label="$language.local('RechargeRate')"
            prop="RechargeRate"
          >
            <!-- <el-radio-group v-show="addForm.Rate > 0" v-model="addForm[key]">
              <el-radio :label="addForm.Rate"
                >起征点以下费率 <b> {{ addForm.Rate }}%</b></el-radio
              >
              <el-radio :label="addForm.QZDRate"
                >起征点以上费率
                <b> {{ addForm.QZDRate }} %</b>
              </el-radio>
            </el-radio-group> -->
            <!-- <el-select v-model="addForm[key]">
              <el-option :value="addForm.Rate"
                >起征点以下费率
                <em>{{ toFixed2(addForm.Rate) }} </em></el-option
              >
              <el-option :value="addForm.QZDRate"
                >起征点以上费率
                <em>{{ toFixed2(addForm.QZDRate) }}%</em></el-option
              >
            </el-select> -->
            <el-select v-model="addForm.RechargeRate">
              <el-option
                v-if="!addForm.Rate"
                :value="addForm.RechargeRate"
                :label="`费率 ${toFixed2(addForm.RechargeRate)}%`"
                >费率{{ toFixed2(addForm.RechargeRate) }}%</el-option
              >
              <el-option
                v-if="addForm.Rate"
                :value="addForm.Rate"
                :label="`起征点以下费率 ${toFixed2(addForm.Rate)}%`"
                >起征点以下费率{{ toFixed2(addForm.Rate) }}%</el-option
              >
              <el-option
                v-if="addForm.QZDRate"
                :value="addForm.QZDRate"
                :label="`起征点以下费率 ${toFixed2(addForm.QZDRate)}%`"
                >起征点以下费率{{ toFixed2(addForm.QZDRate) }}%</el-option
              >
            </el-select>
          </el-form-item>
        </template>
        <!-- #endregion -->
        <!-- #region 服务费计算规则 -->
        <template v-else-if="key === 'ruleType'">
          <el-form-item
            :key="key"
            :label="$language.local('ruleType')"
            prop="ruleType"
          >
            <el-select
              v-model="addForm.ruleType"
              @change="ruleTypeChange"
              placeholder="请选择"
            >
              <el-option
                v-for="item in ruleTypes"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </template>
        <!-- #endregion -->
        <!-- #region 充值金额 -->
        <template v-else-if="key === 'RechargeAmount'">
          <el-form-item
            :key="key"
            prop="RechargeAmount"
            :label="$language.local('RechargeAmount')"
          >
            <xy-decimal
              :disabled="!addForm['RechargeRate'] || !addForm['ruleType']"
              v-model="addForm['RechargeAmount']"
              class="service-account-no"
              @change="rechargeChange"
            ></xy-decimal>
          </el-form-item>
        </template>
        <!-- #endregion -->
        <!-- #region 充值时间 -->
        <template v-else-if="key === 'RechargeTime'">
          <el-form-item
            :key="key"
            prop="RechargeTime"
            :label="$language.local('RechargeTime')"
          >
            <select-date v-model="addForm.RechargeTime"></select-date>
          </el-form-item>
        </template>
        <!-- #endregion -->

        <!-- #region 实发金额 -->
        <template v-else-if="key === 'AccountAmount'">
          <el-form-item
            :key="key"
            prop="AccountAmount"
            :label="$language.local('AccountAmount')"
          >
            <xy-decimal
              :disabled="!addForm['RechargeRate'] || !addForm['ruleType']"
              v-model="addForm['AccountAmount']"
              class="service-account-no"
              @change="accountChange"
            ></xy-decimal>
          </el-form-item>
        </template>
        <!-- #endregion -->

        <!-- #region 付款账户 -->
        <template v-else-if="key === 'PayingAccountName'">
          <el-form-item
            :key="key"
            prop="PayingAccountName"
            :label="$language.local('PayingAccountName')"
          >
            <xy-input
              disabled
              v-model="addForm['PayingAccountName']"
              clearable
            ></xy-input>
          </el-form-item>
        </template>
        <!-- #endregion -->
        <!-- #region 付款银行 -->
        <template v-else-if="key === 'PayingBank'">
          <el-form-item
            :key="key"
            prop="PayingBank"
            :label="$language.local('PayingBank')"
          >
            <xy-input
              disabled
              v-model="addForm['PayingBank']"
              clearable
            ></xy-input>
          </el-form-item>
        </template>
        <!-- #endregion -->
        <!-- #region 付款账户 -->
        <template v-else-if="key === 'PayingAccount'">
          <el-form-item
            :key="key"
            prop="PayingAccount"
            :label="$language.local('PayingAccount')"
          >
            <xy-input
              disabled
              v-model="addForm['PayingAccount']"
              clearable
            ></xy-input>
          </el-form-item>
        </template>
        <!-- #endregion -->

        <!-- #region 费用说明 -->
        <template v-else-if="key === 'Note'">
          <el-form-item :key="key" prop="Note" :label="$language.local('Note')">
            <xy-input v-model="addForm['Note']" clearable></xy-input>
          </el-form-item>
        </template>
        <!-- #endregion -->
        <!-- #region 默认地址 -->
        <template v-else-if="key === 'IsDefault'">
          <el-form-item :key="key" :prop="key" :label="$language.local(key)">
            <!-- <el-radio-group v-model="addForm.IsDefault">
              <el-radio :label="1"> 是</el-radio>

              <el-radio :label="0">否 </el-radio>
            </el-radio-group> -->
            <el-switch
              v-model="addForm[key]"
              :active-value="1"
              :inactive-value="0"
            ></el-switch>
          </el-form-item>
        </template>
        <!-- #endregion -->
        <!-- #region 锁定并禁用 -->
        <template v-else-if="key === 'is_lock'">
          <el-form-item
            v-show="api.action !== 'Create'"
            :key="key"
            :prop="key"
            :label="$language.local(key)"
          >
            <!-- <el-radio-group v-model="addForm.IsDefault">
              <el-radio :label="1"> 是</el-radio>

              <el-radio :label="0">否 </el-radio>
            </el-radio-group> -->
            <el-switch
              v-model="addForm[key]"
              :active-value="1"
              :inactive-value="0"
            ></el-switch>
          </el-form-item>
        </template>
        <!-- #endregion -->
        <!-- #region 归属企业 -->
        <template v-else-if="key === 'BranchName'">
          <el-form-item :key="key" :prop="key" :label="$language.local(key)">
            <select-name
              v-if="addForm.role_id && addForm.role_id !== 12"
              v-model="addForm[key]"
              label-key="organizationName"
              :apiName="`/api/manager/GetorganizationList?RoleId=${addForm.role_id}`"
              @change="BranchNameChange"
            ></select-name>
            <xy-input v-else disabled v-model="addForm[key]"></xy-input>
          </el-form-item>
        </template>
        <!-- #endregion -->
        <!-- #region 归属企业 -->
        <template v-else-if="key === 'ParentId'"> </template>
        <!-- #endregion -->
        <!-- #region 角色权限 -->
        <template v-else-if="key === 'role_id'">
          <el-form-item :key="key" :prop="key" :label="$language.local(key)">
            <select-id
              v-model="addForm[key]"
              label-key="role_name"
              apiName="/api/role/GetList"
              @change="roleNameChange"
            ></select-id>
          </el-form-item>
        </template>
        <!-- #endregion -->
        <!-- #region ModelContent -->
        <template v-else-if="key === 'ModelContent' || key === 'Remarks'">
          <el-form-item
            :key="key"
            :prop="key"
            :label="$language.local(key)"
            class="textarea"
          >
            <xy-input
              type="textarea"
              autosize
              v-model="addForm[key]"
            ></xy-input>
          </el-form-item>
        </template>
        <!-- #endregion -->
        <!-- #region password -->
        <template v-else-if="key === 'password'">
          <el-form-item :key="key" :prop="key" :label="$language.local(key)">
            <xy-input type="password" v-model="addForm[key]"></xy-input>
          </el-form-item>
        </template>
        <!-- #endregion -->
        <!-- #region 创建时间 -->
        <template v-else-if="key === 'Indate'"> </template>
        <!-- #endregion -->
        <template v-else>
          <el-form-item :key="key" :label="$language.local(key)" :prop="key">
            <xy-input v-model="addForm[key]" clearable></xy-input>
          </el-form-item>
        </template>
      </template>
    </el-form>
    <div v-if="api.action == 'Check'" class="radios">
      <!-- <el-select>
        <el-select v-model="RechargeStatus" placeholder="请选择">
          <el-option
            v-for="item in rechargeStatus"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-select> -->

      <el-radio-group v-model="checkStatus">
        <el-radio :label="2">审核通过</el-radio>
        <el-radio :label="4">审核不通过</el-radio>
      </el-radio-group>
    </div>

    <div class="form-footer mt-1 pb-3">
      <el-button size="medium" @click="returnPre">返回</el-button>
      <el-button size="medium" type="primary" @click="onSubmit('addFromRef')"
        >确定</el-button
      >
    </div>

    <!-- #endregion -->
  </div>
</template>

<script>
import API from "../../plugins/api";
export default {
  inject: ["toFixed2"],
  props: {
    model: Object,
  },
  data() {
    return {
      addDialogVisible: false,
      addForm: {},

      addFormItems: this.model,
      banks: [],
      apiName: "/api/employee/Create",
      action: "Create",
      api: null,
      isCheck: false,
      rechargeStatus: [
        {
          label: "待确认",
          value: "1",
        },
        {
          label: "已确认待复核",
          value: "2",
        },
        {
          label: "已复核",
          value: "3",
        },
        {
          label: "无效充值",
          value: "4",
        },
      ],
      serviceBanks: [],
      payChannelList: [],
      rechargeRate: "",
      ruleType: "",
      ruleTypes: [
        {
          label: "充值金额 * 签约费率",
          value: "A",
        },
        {
          label: "充值金额 - 充值金额/(1+签约费率)",
          value: "B",
        },
      ],

      checkStatus: "",
    };
  },
  computed: {
    managerApi() {
      return `/api/Common/GetUserList?roleType=5&customerId=${this.addForm.SuperiorAgentID}`;
    },
    showRate() {
      return this.addForm.Rate;
    },
  },
  created() {
    this.getData();
  },

  methods: {
    async getData() {
      let { api, id } = this.$route.query;
      console.log(api);
      if (api) {
        this.api = new API(api);
        this.action = this.api.action;
        if (this.action === "Check" || this.action === "Audit") {
          this.isCheck = true;
        }
        if (this.action.entity === "AgentWebConfig") {
          this.api.check = "Edit";
        }
        this.addFormItems =
          this.$store.getters.data[this.api.entity] ||
          JSON.parse(window.sessionStorage.getItem(this.api.entity));
        if (this.action == "Create" && this.api.entity !== "Payrefund") {
          this.addForm = { ...this.addFormItems };
          return;
        }

        this.addForm =
          this.$store.getters.data[this.api.entity + id] ||
          JSON.parse(window.sessionStorage.getItem(this.api.entity + "Data"));
        console.log(this.addForm);
        if (!this.addForm) {
          if (!id) {
            this.addForm = { ...this.addFormItems };
            return;
          } else {
            let response = await this.$http.get(this.api.getModel + id);
            console.log(response.data.Data);
            this.addForm = response.data.Data;
            console.log(this.addForm);
          }
        }

        console.log(this.addForm);
        this.getServiceBanks();
        this.getRate(this.addForm.MID, this.addForm.ServiceProviderID);
      }
    },
    superiorAgentChange(e) {
      this.addForm.SuperiorAgentID = e.Id;
      // this.addForm.SuperiorAgentName = e.AgentName;
    },
    async showAddDialog() {
      this.addDialogVisible = true;
    },

    async onSubmit(formName) {
      console.dir(this.addForm);
      let valieded = await this.$refs[formName].validate();
      if (!valieded) {
        return;
      }
      console.log(this.action);
      switch (this.action) {
        case "EditById":
          await this.onEditById();
          break;
        case "Check":
          await this.onCheck();
          break;
        case "Audit":
          await this.onAudit();
          break;
        case "Edit":
          await this.onEdit();
          break;
        case "Create":
          await this.onCreate();
          break;
        default:
          await this.onDefault();
          break;
      }
      switch (this.api.entity) {
        case "Payrefund":
          this.$router.replace("/payrefund");
          break;
        case "refund":
          this.$router.replace("/refund");
          break;
        case "recharge":
          this.$router.replace("/recharge");
          break;
        default:
          this.$router.go(-1);
          break;
      }
    },
    async onDefault() {
      await this.$http.post(this.api.fullName, this.addForm);
    },
    async onEdit() {
      await this.$http.post(this.api.edit, this.addForm);
    },
    async onEditById() {
      // this.addForm.employee.empName = this.addForm.empName;
      console.log(this.addForm);
      let api = this.api.edit + "/" + this.addForm.Id;
      console.log(api);
      await this.$http.post(
        `${this.api.edit}/${this.addForm.Id}?mid=${this.addForm.MID}`,
        this.addForm
      );
    },
    async onCreate() {
      const response = await this.$http.post(this.api.create, this.addForm);
      console.log(response);
      //  if (this.api.entity === 'refund') {

      //      // await this.$http.post(`/api/recharge/refundLock/${Id}`)
      //     }
    },
    onAudit: async function () {
      console.log(this.addForm);
      this.api.check = "Audit/";
      await this.$http.post(
        `${this.api.check}${this.addForm.Id}?mid=${this.addForm.MID}`
      );
    },
    async onCheck() {
      let checkField;
      switch (this.api.entity) {
        case "recharge":
          checkField = "RechargeStatus";
          break;
        default:
          checkField = "CheckStatus";
          break;
      }
      let apiName = `${this.api.check}${this.addForm.Id}?${checkField}=${this.checkStatus}`;
      console.log(apiName);
      await this.$http.post(apiName);
    },
    returnPre() {
      this.$router.go(-1);
    },
    selectManager(e) {
      console.log(e);
      this.addForm.customerManagerId = e.id;
    },
    agentChange(e) {
      console.log(e);
      this.addForm.MID = e.Id;
      this.addForm.PayingBank = e.SettlementBank;
      this.addForm.PayingAccount = e.SettlementAccount;
      this.addForm.PayingAccountName = e.AgentName;
      this.addForm.Rate = e.Rate;
      this.addForm.QZDRate = e.QZDRate;
      // this.addForm.SuperiorAgentName = e.AgentName;
    },
    serviceChange(e) {
      if (!e) {
        return;
      }
      // this.addForm.ServiceBank = e.BankName;
      this.addForm.ServiceProviderID = e.Id;
      this.getServiceBanks();
    },
    serviceBankChange(e) {
      console.log(e);
      if (!e) {
        return;
      }
      this.addForm.ServiceBankId = e.Id;
      this.addForm.ServiceAccountNo = e.AcctNo;
    },
    async getServiceBanks() {
      const id = this.addForm.ServiceProviderID;
      console.log(id);
      if (!id) {
        return;
      }
      let response = await this.$http.get(
        `/api/recharge/GetServiceBank?sid=${id}`
      );
      console.log(response);
      this.serviceBanks = response.data.Data.accountlist;

      this.payChannelList = response.data.Data.paychannellist;
    },
    async customerNameChange(res) {
      if (!res) {
        return;
      }
      // console.log(res);
      this.addForm.MID = res.Id;
      this.getRate(res.Id, this.addForm.ServiceProviderID);
      // console.log(this.addForm.SID);
    },
    async midInput(mid) {
      if (
        Object.prototype.hasOwnProperty.call(this.addForm, "CanrefundAmount")
      ) {
        if (this.addForm.refundType == 2) {
          await this.getAvailableBalance({
            mid,
            sid: this.addForm.SID,
          });
        }
      }
    },
    async getRate(id, sid) {
      console.log(id, sid);
      if (!id || !sid) {
        // this.addForm.Rate = null;
        return;
      }

      let response = await this.$http.get(
        `/api/recharge/GetMerchantBank?mid=${id}&sid=${sid}`
      );
      let payInfo = response.data.Data;
      console.log(payInfo);
      this.addForm.PayingAccountName = payInfo[0].PayingAccountName;
      this.addForm.PayingBank = payInfo[0].PayingBankName;
      this.addForm.PayingAccount = payInfo[0].PayingAccount;
      this.addForm.Rate = Number(payInfo[0].Rate);
      this.addForm.QZDRate = Number(payInfo[0].QZDRate);
      console.log(this.addForm.Rate);
      console.log(this.addForm);
      // this.addForm.ruleType = payInfo[0].Rule;
    },
    ruleTypeChange() {
      // let ruleTyple = e || this.addForm.ruleTyple;
      let recharge = this.addForm.RechargeAmount;
      let account = this.addForm.AccountAmount;

      if (recharge) {
        this.rechargeChange(recharge);
      } else {
        if (!account) {
          return;
        }
        this.accountChange(account);
      }
    },
    rechargeChange(value) {
      // let rate = this.addForm.RechargeRate / 100;
      // let res = 0;
      // if (this.addForm.ruleType == "A") {
      //   res = value * (1 - rate);
      // } else {
      //   res = value / (1 + rate);
      // }
      // this.addForm.AccountAmount = res.toFixed(2);
      this.addForm.AccountAmount = this.calcAccount({
        ruleType: this.addForm.ruleType,
        rate: this.addForm.RechargeRate,
        recharge: value,
      });
    },
    accountChange(value) {
      console.log(value);
      this.addForm.RechargeAmount = this.calcRecharge({
        ruleType: this.addForm.ruleType,
        rate: this.addForm.RechargeRate,
        account: value,
      });
    },
    calcAccount({ ruleType, rate, recharge }) {
      rate /= 100;
      console.log(rate);
      let res = 0;
      if (ruleType == "A") {
        res = recharge * (1 - rate);
      } else {
        res = recharge / (1 + rate);
      }
      return res.toFixed(2);
    },
    calcRecharge({ ruleType, rate, account }) {
      console.log(ruleType, rate, account);
      rate /= 100;
      console.log(rate);
      let res = 0;
      if (ruleType == "A") {
        res = account / (1 - rate);
      } else {
        res = account * (1 + rate);
      }
      return res.toFixed(2);
    },
    sidChange(e) {
      console.log(e);
      console.log(this.addForm);
      if (Object.prototype.hasOwnProperty.call(this.addForm, "ServiceBank")) {
        this.addForm.ServiceBank = e.BankName;
      }
      if (
        Object.prototype.hasOwnProperty.call(this.addForm, "ServiceAccountNo")
      ) {
        this.addForm.ServiceAccountNo = e.AcctNo;
      }
      if (
        Object.prototype.hasOwnProperty.call(this.addForm, "CanrefundAmount")
      ) {
        if (this.addForm.refundType == 2) {
          this.getAvailableBalance({ mid: this.addForm.MID, sid: e.Id });
        }
      }
    },
    async getAvailableBalance({ mid, sid }) {
      let response = await this.$http.get("/api/recharge/GetAvailableBalance", {
        mid,
        sid,
      });
      this.addForm.CanrefundAmount = response.data.Data.AvailableBalance;
      this.rechargeRate = response.data.Data.RechargeRate;
      this.ruleType = response.data.Data.Rule;
    },
    async refundTypeChange(e) {
      if (!this.addForm.MID || !this.addForm.SID) {
        console.log("SID,MID NULL");
        return;
      }
      // 部分退款
      if (e == 2) {
        console.log(e);
        let hasCanrefundAmount = Object.prototype.hasOwnProperty.call(
          this.addFormItems,
          "CanrefundAmount"
        );
        console.log(this.addForm);
        console.log(hasCanrefundAmount);
        console.log(this.addForm.MID, this.addForm.SID);
        if (hasCanrefundAmount) {
          await this.getAvailableBalance({
            mid: this.addForm.MID,
            sid: this.addForm.SID,
          });
        }
      }
    },
    refundAmountInput(value) {
      console.log(value);
      this.addForm.refundRechargeAmount = this.calcRecharge({
        ruleType: this.ruleType,
        rate: this.rechargeRate,
        account: value,
      });
    },
    roleNameChange(e) {
      console.log(e);
      if (e.id === 12) {
        this.addForm.BranchName = "无";
      } else {
        this.addForm.BranchName = "";
      }
      this.addForm.role_type = e.role_type;
    },
    BranchNameChange(e) {
      console.log(e);
      this.addForm.MID = e.Id;
      this.addForm.ParentId = e.Id;
    },
  },
};
</script>
<style lang="less" scoped>
.sex {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
// .upload-img {
//   width: 100%;
// }
.radios {
  text-align: center;
}
</style>
